class Component extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'Xiaomengmeng',
            age: 18
        }
        // this.handleClick = this.handleClick.bind(this);//这个可以用箭头函数代替 
    }
    onValueChange(e) {
        this.setState({
            age: e.target.value
        })
    }
    handleClick(e) {
        this.setState({
            age: this.state.age + 1
        })
    }
    render() {
        return (
            <div>
                <h1>I am {this.state.name}</h1>
                <p>I am {this.state.age} years old</p>
                <button onClick={(e) => { this.handleClick(e) }}>加一岁</button>
                <i> </i>
                <input type="text" onChange={(e) => { this.onValueChange(e) }} />
            </div>
        )
    }
}

class Title extends React.Component {
    constructor(props) {
        super(props);
    }
    render(props) {
        return (
            <div>
                <h1>{this.props.title}</h1>
                <div>{this.props.children}</div>
            </div>
        );
    }
}

class MyApp extends React.Component {
    render() {
        return (
            <div className=''>
                <Title title='App title'>
                    <span>App Span</span>
                    <a href="">link</a>
                </Title>
                <hr />
                <Component />
            </div>
        );
    }
}

ReactDOM.render(
    <div>
        <MyApp />
    </div>,
    document.getElementById('app')
);
